/**
 * Created by chocolate on 16/5/4.
 */
import React, {
    Component,
    StyleSheet,
    Text,
    ListView,
    View,
} from 'react-native';

class EventList extends Component{
    constructor(props){
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        this.state={dataSource:this.ds.cloneWithRows(this.props.datasource)};
    }

    renderEventRecord(rowData: string,sectionID: number, rowID: number){

        if(rowID === "0"){
            return (
                    <View style={[styles.row,{backgroundColor:'yellow'}]}>
                        <Text style={styles.text}>
                            {rowData.time + "            " + rowData.type}
                        </Text>
                    </View>
            )
        }
        else {
            return (
                    <View style={styles.row}>
                        <Text style={styles.text}>
                            {rowData.time + "            " + rowData.type}
                        </Text>
                    </View>
            )
        }

    }

    render(){
        this.state.dataSource = this.ds.cloneWithRows(this.props.datasource);
        return(
            <ListView dataSource={this.state.dataSource}
                      renderRow={this.renderEventRecord}
                      style={styles.listView} />
        )
    }
}

const styles = StyleSheet.create({
    listView: {
        width:200,
        paddingTop: 5,
        backgroundColor: '#FFF',
    },
    row:{
        flexDirection: 'row',
        justifyContent: 'center',
        padding: 5,
        backgroundColor: '#FFF',
        alignItems:'center',
    },
    text:{
        textAlign:'center',
        fontSize:10,
    }
})

module.exports = EventList;